<template>
  <div v-if="showDeviceCom && showBtn">
    <div v-if="fromPage == 1 && positionType == 1 && showBtn" @click="popMoreDevice = true" class="c-bg-white c-hh80 c-ph24 c-flex-row c-aligni-center c-justify-sb">
      <div class="c-flex-row c-aligni-center">
        <div class="c-fs28 theme-fc iconfont c-mr16">&#xe873;</div>
        <div class="c-fs24 c-fc-xblack">该课程可选择其他学习方式</div>
      </div>
      <div class="iconfont c-fs20 c-fc-gray">&#xe60e;</div>
    </div>
    <div v-else-if="fromPage == 1 && positionType == 2 && showBtn" @click="popMoreDevice = true" :class="hasBottomBar ? 'c-p-b88' : 'c-p-b0'" class="c-hh64 bg-more-btn c-flex-row c-aligni-center c-pf c-p-l0 c-p-r0 c-bg-white c-pz2 c-maxw640 c-ph24 c-m-0auto">
      <div class="c-fs20  c-w0 c-flex-grow1 c-fc-xblack c-hh52 c-flex-row c-aligni-center"><span class="iconfont c-fs28 c-mr12 theme-fc">&#xe873;</span>该课程可选择其他学习方式</div>
      <div class="iconfont c-fs18 c-fc-xblack">&#xe60e;</div>
    </div>
    <div v-else-if="fromPage == 2 && showBtn" @click="popMoreDevice = true" class="c-flex-row c-aligni-center c-justify-center" :class="btnClass">其他学习方式</div>
    <open-modal class="c-pz10000" :needCloseBtn="true" :openModal='popMoreDevice' @closeModal='popMoreDevice = false'>
      <div class="c-bg-white c-pt36 c-pb40 c-ph24 c-br-tl20 c-br-tr20">
        <div class="c-fs28 c-textAlign-c c-fc-xblack c-fw600">其他学习方式</div>
        <div @click="openInH5" class="c-flex-row c-aligni-center c-mt40">
          <div class="c-flex-row c-aligni-center c-w0 c-flex-grow1">
            <img :src="$addXossFilter(require('../../assets/wx.png'))" class="c-ww80 c-hh80 c-mr20" alt="" />
            <div class="c-fs24 c-fc-xblack">微信内直接打开</div>
          </div>
          <div class="iconfont c-fs18 c-fc-gray">&#xe60e;</div>
        </div>
        <div @click="copyPCLink" v-if="cfg && (cfg.multiLearningType & 2) == 2 && companyAuth && companyAuth.enablePcModule && prodInfo && (prodInfo.prodType == 5 || prodInfo.prodType == 9 || prodInfo.prodType == 51 || prodInfo.prodType == 180)" class="c-flex-row c-aligni-center c-mt40">
          <div class="c-flex-row c-w0 c-flex-grow1">
            <img :src="$addXossFilter(require('../../assets/pc.png'))" class="c-ww80 c-hh80 c-mr20" alt="" />
            <div class="c-flex-column c-justify-sb c-pv5">
              <div class="c-fs24 c-fc-xblack">PC端</div>
              <div class="c-fs20 c-fc-gray">电脑学习更清晰</div>
            </div>
          </div>
          <div class="iconfont c-fs18 c-fc-gray">&#xe60e;</div>
        </div>
        <!-- [0, 1, 2, 6, 7]: liveType: 0录播 1 手机直播  3 语音直播  4 ppt直播  5 pc直播   6互动直播  7转播 -->
        <div v-if="cfg && (cfg.multiLearningType & 16) == 16 && companyAuth && companyAuth.enableLiveApplet && prodInfo && (prodInfo.prodType == 51 || prodInfo.prodType == 180) && personalRoomIsLiving && [0, 1, 2, 6, 7].includes(prodInfo.liveType)" class="c-flex-row c-aligni-center c-mt40">
          <div class="c-flex-row c-w0 c-flex-grow1 c-p">
            <img :src="$addXossFilter(require('../../assets/xcx.png'))" class="c-ww80 c-hh80 c-mr20" alt="" />
            <div class="c-flex-column c-justify-sb c-pv5">
              <div class="c-fs24 c-fc-xblack">创匠直播小程序<span class="c-fs24 iconfont c-fc-send-green c-ml10">&#xe84f;</span></div>
              <div class="c-fs20 c-fc-gray">更加流畅的直播体验</div>
            </div>
            <div class="open-tag-wrap">
              <wx-open-launch-weapp
                class="launch-btn"
                :username="`${liveUsername}`"
                :path="`${livePath}?${liveWxAppQuery}`"
                @error="handleErrorFn"
                @launch="handleLaunch"
              >
                <script type="text/wxtag-template">
                  <!-- 这里是为了撑开元素，让其可以被点击，不添加template会报错，添加了template不添加内容也会报错 -->
                  <div style="padding: 10000px">
                  </div>
                </script>
              </wx-open-launch-weapp>
            </div>
          </div>
          <div class="iconfont c-fs18 c-fc-gray">&#xe60e;</div>
        </div>
        <div v-if="cfg && (cfg.multiLearningType & 4) == 4 && prodInfo && (prodInfo.prodType == 5 || prodInfo.prodType == 9 || prodInfo.prodType == 61 || prodInfo.prodType == 75 || prodInfo.prodType == 78)" class="c-flex-row c-aligni-center c-mt40">
          <div class="c-flex-row c-w0 c-flex-grow1 c-p">
            <img :src="$addXossFilter(require('../../assets/xcx.png'))" class="c-ww80 c-hh80 c-mr20" alt="" />
            <div class="c-flex-column c-justify-sb c-pv5">
              <div class="c-fs24 c-fc-xblack">创客匠人小程序<span class="c-fs24 iconfont c-fc-send-green c-ml10">&#xe84f;</span></div>
              <div class="c-fs20 c-fc-gray">查找方便，轻松学习</div>
            </div>
            <div class="open-tag-wrap">
              <wx-open-launch-weapp
                class="launch-btn"
                :appid="`${appid}`"
                :username="username"
                :path="`${path}?${wxappQuery}`"
                @error="handleErrorFn"
                @launch="handleLaunch"
              >
                <script type="text/wxtag-template">
                  <!-- 这里是为了撑开元素，让其可以被点击，不添加template会报错，添加了template不添加内容也会报错 -->
                  <div style="padding: 10000px">
                  </div>
                </script>
              </wx-open-launch-weapp>
            </div>
          </div>
          <div class="iconfont c-fs18 c-fc-gray">&#xe60e;</div>
        </div>
        <div @click="goApp" v-if="cfg && (cfg.multiLearningType & 8) == 8 && useLvYueApp == 1 && prodInfo && (prodInfo.prodType == 5 || prodInfo.prodType == 9 || ((prodInfo.prodType == 51 || prodInfo.prodType == 180) && [0, 1, 2, 6, 7].includes(prodInfo.liveType)))" class="c-flex-row c-aligni-center c-mt40">
          <div class="c-flex-row c-w0 c-flex-grow1">
            <img :src="$addXossFilter(require('../../assets/app.png'))" class="c-ww80 c-hh80 c-mr20" alt="" />
            <div class="c-flex-column c-justify-sb c-pv5">
              <div class="c-fs24 c-fc-xblack">创客匠人学员版APP</div>
              <div class="c-fs20 c-fc-gray">沉浸式学习与交互体验</div>
            </div>
          </div>
          <div class="iconfont c-fs18 c-fc-gray">&#xe60e;</div>
        </div>
      </div>
    </open-modal>
  </div>
</template>
<script>
/*
cfg相关字段
cfg.enableMultiLearning: 引导设置总开关
cfg.multiLearningPage: 引导页面 1：详情页 2：支付完成引导页
cfg.multiLearningType: 引导方式 1：微信H5 2：PC端 4：创客匠人小程序 8：创客匠人学员版APP 16：创匠直播小程序
*/
import OpenModal from "@/components/templates/common/openModal.vue";
import { utilJs } from "@/utils/common.js"
let env = window.location.host.indexOf('test') > -1 ? 0 : 1;
let liveEnv = window.location.host.indexOf('test') > -1 ? 1 : window.location.host.indexOf('formal') > -1 ? 2 : 3;
export default {
  name: "MoreDevice",
  components: {
    OpenModal
  },
  props: {
    prodInfo: {
      type: Object,
      default: null
    },
    fromPage: { //1：详情页 2：引导页
      type: Number,
      default: 1,
    },
    positionType: {
      type: Number, //1: 页面中间 2：固定在底部 进入页面在页面中间，向上滚动后固定在底部
      default: 1,
    },
    personalRoomIsLiving: {
      type: Boolean,
      default: true
    },
    hasBottomBar: {
      type: Boolean,
      default: true
    },
    btnClass: {
      type: String,
      default: 'c-ww200 c-hh60 c-br32 c-fs24 c-fc-white bg-deepGreen c-ml40'
    },
  },
  watch: {
  },
  data() {
    return {
      popMoreDevice: false,
      cfg: JSON.parse(localStorage.getItem("cfg")),
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      useLvYueApp: JSON.parse(localStorage.getItem("useLvYueApp")),
      appid: 'wx032bc58d1be3d3e2',
      companyId: localStorage.getItem("companyId"),
      userId:  localStorage.getItem("userId"),
      token: localStorage.getItem("token"),
      url: window.location.href,
      liveUsername: 'gh_23f33c234d8c',
      isWeChat: utilJs.isWeiXin(),
    }
  },
  computed: {
    showDeviceCom() {
      let isShowPage = (this.fromPage == 1 && (this.cfg.multiLearningPage & 1) == 1) || (this.fromPage == 2 && (this.cfg.multiLearningPage & 2) == 2)
      let ShowOverall = !this.$isWxApp() && this.isWeChat && this.cfg && this.cfg.enableMultiLearning == 1 && this.cfg.multiLearningType > 1 && isShowPage;
      return ShowOverall;
    },
    showBtn() {
      let hasMoreBtn = (this.cfg && (this.cfg.multiLearningType & 2) == 2 && this.companyAuth && this.companyAuth.enablePcModule && this.prodInfo && (this.prodInfo.prodType == 5 || this.prodInfo.prodType == 9 || this.prodInfo.prodType == 51 || this.prodInfo.prodType == 180))
      || (this.cfg && (this.cfg.multiLearningType & 16) == 16 && this.companyAuth && this.companyAuth.enableLiveApplet && this.prodInfo && (this.prodInfo.prodType == 51 || this.prodInfo.prodType == 180) && this.personalRoomIsLiving && [0, 1, 2, 6, 7].includes(this.prodInfo.liveType))
      || (this.cfg && (this.cfg.multiLearningType & 4) == 4 && this.prodInfo && (this.prodInfo.prodType == 5 || this.prodInfo.prodType == 9 || this.prodInfo.prodType == 61 || this.prodInfo.prodType == 75 || this.prodInfo.prodType == 78))
      || (this.cfg && (this.cfg.multiLearningType & 8) == 8 && this.useLvYueApp == 1 && this.prodInfo && (this.prodInfo.prodType == 5 || this.prodInfo.prodType == 9 || ((this.prodInfo.prodType == 51 || this.prodInfo.prodType == 180) && [0, 1, 2, 6, 7].includes(this.prodInfo.liveType))))
      if (hasMoreBtn) {
        this.$store.commit("updateHasNoticeText", true);
      }
      return hasMoreBtn
    },
    path() {
      let xcxPath = '';
      if (this.prodInfo) {
        switch (this.prodInfo.prodType) {
          case 5:
            if (this.prodInfo.courseType == 2) {
              xcxPath = '/pages/home/course/article/index';
            } else if (this.prodInfo.courseType == 1) {
              xcxPath = '/pages/home/course/audio/index';
            } else {
              xcxPath = '/pages/home/course/video/index';
            }
            break;
          case 9:
            xcxPath = '/pages/home/column/index';
            break;
          case 75:
          case 78:
          case 61:
            xcxPath = '/pages/webView/index';
            break;
        }
      }
      return xcxPath;
    },
    livePath() {
      let xcxPath = '';
      if (this.prodInfo) {
        switch (this.prodInfo.prodType) {
          case 51:
          case 180:
            xcxPath = 'rooms/pages/vertical/index';
            break;
        }
      }
      return xcxPath;
    },
    wxappQuery() {
      let xcxQuery = '';
      if (this.prodInfo) {
        switch (this.prodInfo.prodType) {
          case 5:
            xcxQuery = `courseId=${this.prodInfo.prodId}&c=${this.companyId}&u=${this.userId}&env=${env}`;
            break;
          case 9:
            xcxQuery = `extId=${this.prodInfo.prodId}&c=${this.companyId}&u=${this.userId}&env=${env}`;
            break;
          case 75:
          case 78:
          case 61:
            xcxQuery = this.getQuerys();
            break;
        }
      }
      return xcxQuery;
    },
    liveWxAppQuery() {
      let xcxQuery = '';
      if (this.prodInfo) {
        switch (this.prodInfo.prodType) {
          case 51:
            xcxQuery = `liveId=${this.prodInfo.prodId}&socialRoomId=${this.prodInfo.socialRoomId}&env=${liveEnv}&from=gzh&token=${this.token}&refereeId=${localStorage.getItem("refereeId")}`
            break;
          case 180:
            xcxQuery = `liveId=${this.prodInfo.prodId}&socialRoomId=${this.prodInfo.socialRoomId}&detailId=${this.prodInfo.detailId}&env=${liveEnv}&from=gzh&token=${this.token}&refereeId=${localStorage.getItem("refereeId")}`
            break;
        }
      }
      return xcxQuery;
    }
  },
  methods: {
    getQuerys() {
      let toUrl = ''
      if (this.fromPage == 2) {
        let toPath = '';
        if (this.prodInfo.prodType == 61) {
          toPath = 'package/packageDetail?combosId=';
        } else if (this.prodInfo.prodType == 75) {
          toPath = 'mutuaTest/mutuaTestDetail?mutuaTestId=';
        } else {
          toPath = 'camp/campDetail?campId=';
        }
        toUrl = this.url.split('payPolitely/payPolitely')[0] + toPath + this.prodInfo.prodId;
      } else {
        toUrl = this.url;
      }
      if (env > 0) {
        let companyId = localStorage.getItem("companyId");
        toUrl = 'https://wxapph5.ckjr001.com/mini/' + companyId + toUrl.split(companyId)[1];
      }
      return `webUrl=${encodeURIComponent(toUrl)}&c=${this.companyId}&u=${this.userId}&t=${this.token}&env=${env}`;
    },
    openInH5() {
      if (this.fromPage == 1) {
        this.popMoreDevice = false;
      } else if (this.fromPage == 2) {
        this.popMoreDevice = false;
        this.$emit('openInH5')
      }
    },
    copyPCLink() {
      let domain = localStorage.getItem("domain") ? localStorage.getItem("domain") : '';
      let PCLink = '';
      if (this.prodInfo && this.prodInfo.prodType == 5) {
        PCLink = `${domain}/course/courseDetail.html?courseId=${this.prodInfo.prodId}`;
      }
      if (this.prodInfo && this.prodInfo.prodType == 9) {
        PCLink = `${domain}/column/columnDetail.html?columnId=${this.prodInfo.prodId}`;
      }
      if (this.prodInfo && this.prodInfo.prodType == 51) {
        PCLink = `${domain}/living/livingDetail.html?id=${this.prodInfo.prodId}`;
      }
      if (this.prodInfo && this.prodInfo.prodType == 180) {
        PCLink = `${domain}/living/independentLivingDetail.html?id=${this.prodInfo.prodId}`;
      }
      utilJs.copyText(PCLink, 0).then(res => {
        this.$showCjToast({
          text: '已复制链接，请在电脑浏览器中打开',
          type: 'success'
        });
      })
    },
    async goApp() {
      const { distribution } = await utilJs.getLiveAuthData();
      let openUrl = `${distribution.domainUrl}/launchApp.html?prodType=${this.prodInfo.prodType}&prodId=${this.prodInfo.prodId}&companyId=${this.companyId}&userId=${this.userId}`;
      if (this.prodInfo.detailId) {
        // 独立直播直播间
        openUrl += `&detailId=${this.prodInfo.detailId}`;
      }
      if (this.prodInfo.name) {
        openUrl += `&name=${this.prodInfo.name}`;
      }
      if (this.prodInfo.courseType) {
        openUrl += `&courseType=${this.prodInfo.courseType}`;
      }
      console.log("goApp", openUrl);
      // let openUrl = `${hostUrl}/launchApp.html?prodType=5&prodId=4079667&companyId=b9kyda&userId=e82blr5&courseType=0&name=0619免费视频1910:51:10`;
      window.location.replace(openUrl);
    },
    handleLaunch(e) {
        console.log('handleLaunch---', e)
        // this.$emit('handleLaunch')
    },
    handleErrorFn(e) {
      this.$showCjToast({
        text: e.errMsg || '无法打开小程序，请升级微信版本',
        type: "warn",
      })
    },
  }
};
</script>

<style scoped>
.bg-more-btn {
  background: #ffffff;
  box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.1);
  /* background-image: linear-gradient(270deg, #FEF2EB 0%, #FCE9F6 100%); */
}
.open-tag-wrap {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
}
.launch-btn {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}
.bg-deepGreen {
  background-color: #23DB85;
}
</style>